今天一樣用 turbo frame 的方式來做

我們想針對每個單品做編輯，而且是在單品的項目中做

我們就得在 id 中加上每個單品的 id，讓 Turbo 知道該去渲染 index 的哪個區塊

# app/views/admin/drinks/edit.html.erb

<%= turbo_frame_tag "drink_#{@drink.id}" do %>
  <h2 class="mb-10 text-2xl">編輯飲品</h2>
  <%= render(DrinkFormComponent.new(drink: @drink)) %>
<% end %>

在 HTML 中會長這樣

<turbo-frame id="drink_13" src="http://127.0.0.1:3000/admin/drinks/pineapple/edit" complete>
  <h2 class="mb-10 text-2xl">編輯飲品</h2>
  ...
</turbo-frame>    

Turbo 知道該找哪塊之後，我們得告訴他要渲染在 index 的哪個地方

因此我們在每個單品外層加上 id

# app/views/admin/drinks/index.html.erb

<% @drinks.each do |drink| %>
  <%= turbo_frame_tag "drink_#{drink.id}" do %>
    <div class="w-2/4 p-4 mb-8 text-white border-2 rounded-lg bg-slate-500">
      <div class="flex items-center mb-4 field">
        <%= drink.name %>
      </div>
        
      <div class="flex items-center mb-4 field">
        <%= drink.description %>
      </div>
    
      <div class="flex items-center field">
        <%= number_to_currency(drink.price, precious: 0) %>
      </div>

      <div class="flex items-center field">
        <%= link_to '編輯', edit_admin_drink_path(drink), class: 'bg-white rounded-lg text-slate-500 p-2 mr-4' %>
        <%= link_to '刪除', admin_drink_path(drink), data: { turbo_method: :delete }, class: 'bg-white rounded-lg text-slate-500 p-2' %>
      </div>
    </div>
  <% end %>
<% end %>

在 HTML 中長這樣

<turbo-frame id="drink_13">
  ...
</turbo-frame>

當我們按下編輯的時候，原本單品的區塊就會被取代了